Highcharts একটি শক্তিশালী জাভাস্ক্রিপ্ট লাইব্রেরি যা ডেটা ভিজ্যুয়ালাইজেশনের জন্য ব্যবহৃত হয়। Angular এ Highcharts ব্যবহার করার জন্য একটি অফিসিয়াল র‍্যাপার রয়েছে যার মাধ্যমে Highcharts কম্পোনেন্টগুলো Angular অ্যাপ্লিকেশনগুলোর মধ্যে সহজে ইন্টিগ্রেট করা যায়। এই র‍্যাপারটি highcharts-angular নামে পরিচিত।

Highcharts Angular র‍্যাপার ইনস্টল করতে নিচের ধাপগুলো অনুসরণ করুন।

1. Highcharts এবং highcharts-angular ইনস্টল করা

প্রথমে, আপনাকে Highcharts এবং highcharts-angular প্যাকেজ দুটি ইনস্টল করতে হবে। এই প্যাকেজগুলো ইনস্টল করতে npm ব্যবহার করুন।

প্রজেক্টের ডিরেক্টরিতে গিয়ে নিচের কমান্ডটি চালান:

npm install highcharts highcharts-angular --save

এটি আপনার package.json ফাইলে প্যাকেজগুলো যুক্ত করবে এবং node_modules/ ফোল্ডারে লাইব্রেরি ইনস্টল করবে।

2. Highcharts মডিউল ইমপোর্ট করা

Highcharts Angular র‍্যাপার ব্যবহার করতে হলে আপনাকে HighchartsChartModule মডিউলটি আপনার Angular মডিউলে ইমপোর্ট করতে হবে। সাধারণত এটি app.module.ts ফাইলে করা হয়।

এটি করার জন্য, প্রথমে highcharts-angular থেকে HighchartsChartModule ইমপোর্ট করুন:

import { HighchartsChartModule } from 'highcharts-angular';

এরপর, imports অ্যারে তে HighchartsChartModule যোগ করুন:

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HighchartsChartModule  // Highcharts module ইমপোর্ট করা হয়েছে
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. Highcharts কম্পোনেন্ট ব্যবহার করা

এখন আপনি Angular কম্পোনেন্টে Highcharts ব্যবহার করতে পারবেন। একটি নতুন কম্পোনেন্ট তৈরি করে সেখানে Highcharts ইন্টিগ্রেট করা যাবে।

উদাহরণস্বরূপ, একটি সিম্পল line chart তৈরি করার জন্য আপনার কম্পোনেন্ট কোড হবে:

import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  Highcharts = Highcharts;
  chartOptions = {
    chart: {
      type: 'line'
    },
    title: {
      text: 'Highcharts Example'
    },
    series: [{
      name: 'Example Series',
      data: [1, 2, 3, 4, 5]
    }]
  };
}

এখানে Highcharts ইমপোর্ট করা হয়েছে এবং chartOptions নামের একটি ভেরিয়েবলে চার্টের কনফিগারেশন সংরক্ষণ করা হয়েছে।

4. কম্পোনেন্ট টেমপ্লেটে Highcharts ব্যবহার করা

এখন আপনার কম্পোনেন্ট টেমপ্লেটে highcharts-chart ট্যাগ ব্যবহার করতে হবে। এটি সেই কম্পোনেন্টের জন্য চার্টটি রেন্ডার করবে।

app.component.html ফাইলের মধ্যে এটি করুন:

<highcharts-chart
  [Highcharts]="Highcharts"
  [options]="chartOptions"
  style="width: 100%; height: 400px; display: block;">
</highcharts-chart>

এখানে Highcharts এবং chartOptions প্রপ্স হিসেবে পাস করা হয়েছে, যা পূর্বে TypeScript ফাইলে সংজ্ঞায়িত করা হয়েছিল।

5. অ্যাপ্লিকেশন রান করা

এখন, প্রজেক্টটি রান করার জন্য নিচের কমান্ডটি ব্যবহার করুন:

ng serve

আপনার অ্যাপ্লিকেশনটি http://localhost:4200/ এ খোলার পর আপনি Highcharts এর line chart দেখতে পাবেন।

সারাংশ

Highcharts Angular র‍্যাপার ইনস্টল এবং কনফিগার করার মাধ্যমে আপনি Angular অ্যাপ্লিকেশনে Highcharts চার্ট সহজে ইন্টিগ্রেট করতে পারবেন। highcharts এবং highcharts-angular প্যাকেজগুলো ইনস্টল করার পর, Highcharts কম্পোনেন্ট ব্যবহার করতে পারবেন এবং বিভিন্ন ধরনের চার্ট যেমন লাইন, বার, পাই ইত্যাদি তৈরি করতে পারবেন।